nav {
  border-width: 1px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  .test-a {
    --un-shadow: var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0
              0 0 / 0.1)),
      var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 /
              0.1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
      var(--un-shadow);
    border-radius: 0.375rem;
    --un-bg-opacity: 1;
    background-color: rgb(203 213 225 / var(--un-bg-opacity));
    --un-shadow-opacity: 1;
    --un-shadow-color: rgb(245 158 11 / var(--un-shadow-opacity));
  }
  .test-b {
    --un-shadow: var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0
              0 0 / 0.1)),
      var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 /
              0.1));
    box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow),
      var(--un-shadow);
    font-size: 20px;
    border-radius: 0.375rem;
    --un-bg-opacity: 1;
    background-color: rgb(203 213 225 / var(--un-bg-opacity));
    --un-shadow-opacity: 1;
    --un-shadow-color: rgb(245 158 11 / var(--un-shadow-opacity));
  }
  a {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  a:hover {
    text-decoration-line: underline;
  }
}
